<template>
  <div class="rating-select">
    <div class="rating-type">
      <span class="block positive" :class="{'active' : selType === 2}"
            @click="fnSelRatingType(2,$event)">{{desc.all}}<span
        class="count">{{ratings.length}}</span></span>
      <span class="block positive" :class="{'active' : selType === 0}"
            @click="fnSelRatingType(0,$event)">{{desc.positive}}<span class="count">{{positiveTotal.length}}</span></span>
      <span class="block negative" :class="{'active' : selType === 1}"
            @click="fnSelRatingType(1,$event)">{{desc.negative}}<span class="count">{{negativeTotal.length}}</span></span>
    </div>
    <div class="switch" :class="{'active' : onlyCnt}" @click="fnSelSwitch($event)">
      <span class="icon-check_circle"></span><span class="desc">只看有内容的评价</span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  // 常量
  const POSITIVE = 0 // 满意
  const NEGATIVE = 1 // 不满意
  const ALL = 2 // 全部

  export default {
    props: {
      // 所有评价
      ratings: {
        type: Array,
        default () {
          return []
        }
      },
      // 标志[全部 - 推荐 - 吐槽]中选中的哪一状态
      selectType: {
        type: Number,
        default: ALL
      },
      // 是否只显示有内容的评论
      onlyContent: {
        type: Boolean,
        default: false
      },
      // 按钮的文字
      desc: {
        type: Object,
        default () {
          return {
            all: '全部',
            positive: '满意',
            negative: '不满意'
          }
        }
      }
    },
    data () {
      return {
        // props中的参数不能被修改,否则会报警告,因此在data中创建一个副本
        selType: this.selectType,
        onlyCnt: this.onlyContent
      }
    },
    watch: {
      // 监听props中selectType的值，将selectType的值同步给selType
      selectType (val) {
        this.selType = val
      },
      // 监听props中onlyContent的值，将onlyContent的值同步给onlyCnt
      onlyContent (val) {
        this.onlyCnt = val
      }
    },
    computed: {
      // 推荐的评价总数
      positiveTotal () {
        return this.ratings.filter((rating) => {
          return rating.rateType === POSITIVE
        })
      },
      // 吐槽的评价总数
      negativeTotal () {
        return this.ratings.filter((rating) => {
          return rating.rateType === NEGATIVE
        })
      }
    },
    methods: {
      // 选中按钮
      fnSelRatingType (type, event) {
        if (!event._constructed) {
          return
        }
        this.selType = type
        this.$emit('emit-sel-type', this.selType)
      },
      // 选中是否只看有内容的评论
      fnSelSwitch (event) {
        if (!event._constructed) {
          return
        }
        this.onlyCnt = !this.onlyCnt
        this.$emit('emit-only-cnt', this.onlyCnt)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .rating-select {
    .rating-type {
      padding: 26px 0;
      margin: 0 18px;
      border-bottom: 1px solid rgba(7, 17, 27, .1);
      .block {
        font-size: 12px;
        font-weight: 500;
        color: rgb(77, 85, 93);
        padding: 8px 12px;
        margin-right: 8px;
        border-radius: 2px;
        line-height: 18px;
        &.active {
          color: #fff;
        }
        .count {
          font-size: 8px;
          padding-left: 4px;
        }
        &.positive {
          background: rgba(0, 160, 220, .2);
          &.active {
            background: rgb(0, 160, 220);
          }
        }
        &.negative {
          background: rgba(77, 85, 93, .2);
          &.active {
            background: rgb(77, 85, 93);
          }
        }
      }
    }

    .switch {
      margin-top: 12px;
      padding: 0 18px 12px 18px;
      border-bottom: 1px solid rgba(7, 17, 27, .1);
      display: flex;
      align-items: center;
      &.active {
        .icon-check_circle {
          color: rgb(0, 160, 220);
        }
      }
      .icon-check_circle {
        font-size: 24px;
        color: rgb(147, 153, 159);
        line-height: 24px;
        margin-right: 4px;
      }
      .desc {
        font-size: 12px;
        color: rgb(147, 153, 159);
        line-height: 24px;
      }
    }
  }
</style>
